<template>
  <div class="set-all-con">
    <div class="text-con">
      <span>图片大小:</span>
      <input type="text" v-model.number="ImgObj.width" placeholder="宽" />
      <input type="text" v-model.number="ImgObj.height" placeholder="高" />
    </div>
    <div class="opaqueness">
      <span>圆角:</span>
      <div class="set-opaq">
        <input type="number" v-model.number="ImgObj.borderRadius" min="0" placeholder="圆角" />
      </div>
    </div>
    <div class="opaqueness" style="margin-top:10px">
      <span>上传:</span>
      <div class="choose-btn-img">
        <img :src="ImgObj.url" alt />
      </div>
      <img class="upimg" @click="showImg = true" src="@/assets/config_images/addimg.png" alt />
    </div>
    <UploadImages @closeModel="closeModel" :dialogVisible="showImg"></UploadImages>
  </div>
</template>
<script>
import "./diyset.scss";
import UploadImages from "@/components/UploadImages/UploadImages";
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["ImgObj", "imgUrl"])
  },
  components: {
    UploadImages
  },
  data() {
    return {
      showImg: false
    };
  },
  watch: {
    ImgObj: {
      handler(oldVal, newVal) {
        // 更新vuex里面的PageJSON
        this.$store.dispatch("apply/PageJSONUpData");
        // 更新父组件中的PageJSON
        this.$emit('updataNowPageJSON');
      },
      deep: true
    }
  },
  methods: {
    closeModel() {
      this.showImg = false;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "./diyset.scss";
.set-all-con {
  width: 100%;
  height: 100%;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  .text-con {
    @include flexCon(276px, 50px, center, space-between, 38px);
    position: relative;
    justify-content: flex-start;
    input {
      @include wd(70px, 30px);
      background: rgba(255, 255, 255, 1);
      border-radius: 3px;
      font-size: 14px;
      padding-left: 8px;
      margin-left: 20px;
      border: 1px solid rgba(223, 223, 223, 1);
    }
  }
  .opaqueness {
    @include flexCon(276px, 50px, center, space-between, 68px);
    justify-content: flex-start;
    .choose-btn-img {
      width: 40px;
      height: 40px;
      border-radius: 3px;
      overflow: hidden;
      margin-left:20px;
      background: rgba(214, 235, 255, 1);
      img {
        width: 100%;
        height: 100%;
      }
    }
    .set-opaq input {
      @include wd(70px, 30px);
      margin-left: 16px;
      border-radius: 3px;
      line-height: 30px;
      padding-left: 14px;
      display: flex;
      border: 1px solid rgba(223, 223, 223, 1);
      align-content: center;
      justify-content: space-between;
    }
    .upimg {
      width: 40px;
      height: 40px;
      margin-left: 18px;
    }
  }
}
</style>
